<template>
  <div style="width: 100%;height: 100%">
    <Navigation></Navigation>
    <div class="left-bar">
      <a-button type="primary" block icon="folder-add" @click="open">
        新增项目
      </a-button>
      <div class="add">
        <a-modal
          title="项目信息"
          :visible="visible"
          @ok="create"
          @cancel="cancel">
          <a-input placeholder="项目名称" v-model="project_name" />
          <a-input placeholder="项目描述" style="margin-top: 20px" v-model="description" />
        </a-modal>
        <a-modal
          title="新建执行节点"
          :visible="visiblePy"
          @ok="createPy"
          @cancel="cancelPy">
          <a-input placeholder="文件名称" style="margin-top: 20px" v-model="filename_tmp" />
        </a-modal>
        <div class="list">
          <a-directory-tree
            multiple
            default-expand-all
            @select="onSelect"
            @expand="onExpand"
            @rightClick="rightClick"
            :tree-data="project"
          >
          </a-directory-tree>
        </div>
      </div>
    </div>
    <div class="content" id="mycodeContent" style="visibility: hidden">
      <div style="width:100%;height:50px;background-color: #001C34;display: flex;padding-top: 10px;">
        <a-button type="primary"  style="margin-left: 50px;" icon="save" @click="save" >保存</a-button>
        <a-button type="primary"  style="margin-left: 20px;" icon="play-circle" @click="run" >运行</a-button>
        <a-button type="primary"  style="margin-left: 20px;" v-if="!isShowPackge" icon="eye-invisible" @click="packgeButton" >显示依赖</a-button>
        <a-button type="primary"  style="margin-left: 20px;"  v-if="isShowPackge" icon="eye" @click="packgeButton" >屏蔽依赖</a-button>
      </div>
      <textarea ref="mycode" class="codesql" v-model="content" style="margin-top:30px;width: 100vw;height: 900px"></textarea>
    </div>
    <div>
      <div class="packge-pannel" v-if="isShowPackge">
        <ul>
          <li>
            <div>包名</div>
            <div>版本号</div>
            <div @click="addPackge">操作＋</div>
            <div @click="addPackge">安装</div>
          </li>
          <li v-for="(i,key) in packge" style="margin-left: 5px;">
            <div><a-input placeholder="包名" v-model="i['packge']" /></div>
            <div><a-input placeholder="版本" v-model="i['version']" /></div>
            <div><a-button type="primary" shape="circle" style="width: 30px;height: 30px;" icon="save" @click="savePackge(key)" /></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="console">
      <log-menu></log-menu>
    </div>
    <div class="taskTree">
      <div>
        <ul>
<!--          <li class="j-node" v-for="tas"></li>-->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";

let CodeMirror = require("codemirror/lib/codemirror");
let logMenu = require("../common/LogMenu")
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/mode/python/python");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
import 'codemirror/lib/codemirror.css'
import qs from 'qs'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/cobalt.css'
import axios from 'axios'
import { message } from 'ant-design-vue';
import Jmenu from "../menu/Jmenu";
import LogMenu from "../common/LogMenu";
import Navigation from "../common/Navigation";
// require("codemirror/addon/hint/python-hint");
export default {
  components:{
    Navigation,
    LogMenu,
    Jmenu,
    CodeMirror,
  },
  name: "programe",
  watch:{
    current_programe:{ //监听的对象
      deep:true, //深度监听设置为 true
      handler:function(newV,oldV){
        try{
          if (this.editor.getValue()!==this.current_programe.programe_source){
            this.editor.setValue(this.current_programe.programe_source)
            this.programe_source[this.current_programe['id']]=this.current_programe;
          }

        }
        catch (e){

        }

      }
    }
  },
  data(){
    return {
      packge:[],
      isShowPackge:false,
      editor:null,
      visiblePy:false,
      visibleCode:false,
      project:[],
      visible:false,
      project_name:'',
      description:'',
      id:"",
      dirname:"",
      filename:"",
      filename_tmp:"",
      content:"",
      template_programe:{
        id:"",
        pid:"",
        project_id:"",
        programe_source:"",
        filename:"",
        dirname:"",
        is_dir:0
      },
      programe_source:{

      },
      current_programe:{
        id:"",
        pid:"",
        project_id:"",
        programe_source:"",
        filename:"",
        dirname:"",
        is_dir:0
      },
      current_project_id:null,
    }
  },
  methods:{
    addPackge(){
      this.packge.push({
        "packge":"",
        "version":""
      })
    },
    savePackge(id){
      let data=this.packge[id]
      data["project_id"]=this.current_project_id
      axios.post(window.baseUrl+"programe/editPackge",qs.stringify(data)).then((res)=>{
        message.info(res.data.msg);
      }).catch((err)=>{

      })
    },
    packgeButton(){
      this.isShowPackge=!this.isShowPackge;
      this.showPackge();
    },
    parseKeyInfo(keyString){
      if (typeof keyString!=="string"){
        return false;
      }
      let keyList=keyString.split("_");
      this.current_project_id=keyList[0]
      this.showPackge()
      return {
        'project_id': keyList[0],
        'pid':keyList[1],
        'id':keyList[2],
        'isDir':keyList[3]==1
      }
    },
    onSelect(keys, event) {
      let info=this.parseKeyInfo(keys[0])
      if (!info){
        return;
      }
      this.current_programe={}
      if (!info.isDir){
        this.showCode(true)
        axios.get(window.baseUrl+"programe/detail?id="+info.id).then((res)=>{
          let data=res.data.data
          if (!this.programe_source.hasOwnProperty(data["id"])){
            this.programe_source[data["id"]]=data
          }
          this.current_programe=this.programe_source[data["id"]];
          console.log(this.current_programe)
        }).catch((err)=>{

        })
      }
    },
    createPy(){
      if (this.filename_tmp!=""){
        this.filename=this.filename_tmp;
        this.filename_tmp=""
        this.visiblePy=false;
        this.template_programe.filename=this.filename;
        this.current_programe=this.template_programe;
        this.showCode(true)
      }
    },
    showPackge(){
      if (this.isShowPackge){
        axios.get(window.baseUrl+"programe/packge?project_id="+this.current_project_id).then((res)=>{
          console.log(res.data)
          this.packge=res.data.list
        }).catch((err)=>{

        })
      }
    },
    showCode(isShow){
      if (isShow){
        document.querySelector("#mycodeContent").style.visibility="visible"
      }else {
        document.querySelector("#mycodeContent").style.visibility="hidden"
      }
    },
    cancelPy(){
      this.visiblePy=false;
    },
    onExpand(){
      console.log('Trigger Expand');
    },
    setCodePannleWidth(){
      let ele=document.querySelector(".CodeMirror")
      ele.style.height="100%"
      let width=window.innerWidth-document.querySelector('.left-bar').style.width;
      ele.style.width=width+"px"
      ele.style.height=(window.innerHeight-50)+"px"
    },
    rightClick(event,node){
      let keyInfo=this.parseKeyInfo(event.node.dataRef.key)
      this.template_programe={
          id:"",
          pid:keyInfo.id,
          project_id:keyInfo.project_id,
          programe_source:"",
          filename:"",
          dirname:"",
          is_dir:0
      }
      if (keyInfo.isDir){
        this.visiblePy=true;
      }

    },
    save(){
      axios.post(window.baseUrl+"programe/edit",qs.stringify(this.current_programe)).then((res)=>{
        message.info(res.data.msg);
      }).catch((err)=>{
        message.error("系统错误");
      })
    },
    run(){
      axios.post(window.baseUrl+"programe/run",qs.stringify({"id":this.current_programe.id})).then((res)=>{
        message.info(res.data.msg);
      }).catch((err)=>{
        message.error("系统错误");
      })
    },
    create(){
      axios.post(window.baseUrl+"programe/project/create",qs.stringify({project_name:this.project_name,description:this.description}))
      .then((res)=>{
        if (res.data.code===200){
          this.getProject();
          message.info(res.data.msg);
          this.visible=false;
          this.getProject()
        }
      }).catch((err)=>{

      })
    },
    cancel(){
      this.visible=false;
    },
    open(){
      this.visible=true
    },
    getProject(){
      axios.get(window.baseUrl+"programe/project/index").then((res)=>{
        this.project=res.data.list
      })
    }
  },
  created(){
  },
  mounted() {
    this.getProject()
    //let theme = 'ambiance'//设置主题，不设置的会使用默认主题
    let mime = 'python'
    let editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      theme: "cobalt",
      mode: mime,//
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      // matchBrackets: true,
      //theme: theme,
      autofocus: false,
      extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
      hintOptions: {
        completeSingle: false
      }
    })
    //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
    let self=this;
    editor.on('keypress', function () {
      self.current_programe.programe_source=editor.getValue();
      editor.showHint()
    })
    editor.on('change', function () {
      self.current_programe.programe_source=editor.getValue();
    })
    this.editor=editor;
    this.setCodePannleWidth();
    window.onresize=()=>{
      this.setCodePannleWidth();
    }
  }
}
</script>

<style scoped>
.left-bar{
  position: fixed;
  left: 0;
  width:350px;
  top:0;
  height: 100%;
  background-color: rgba(169, 194, 219, 0.41);
}
.content{
  opacity: 0.8;
  width: 800px;
  position: relative;
  left: 350px;
  height: 100vh;
}
.packge-pannel{
  right: 10px;
  position: fixed;
  width: 40vh;
  height: 50vh;
  bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 5px;
  padding: 5px 5px;
  color: white;
  text-align: center;
  margin: 0 auto;
}
.packge-pannel li{
  list-style: none;
  display: flex;
  height: 35px;
  margin-top: 2px;
}
.packge-pannel li div{
  width: 33%;
  height: 20px;
  border: 1px lightyellow;
}
</style>
